<style>
    #classContent button .addUser {
        background-color: #2CB5AC;
        color: white;
    }
    
    #classContent .classtable span:hover {
        cursor: pointer;
    }
</style>
<div id="classContent">
    <div class="row">
        <div class="col-md-1">
            <button class="btn btn-default addclass" href="#" role="button" data-toggle="modal" data-target="#classModal">添加</button>
        </div>
        <div class="col-md-11"></div>
    </div>
    <table class="table table-hover classtable">
        <thead>
            <td class="col-md-1">序号</td>
            <td class="col-md-1">名称</td>
            <td class="col-md-1">排序号</td>
            <td class="col-md-1">父栏目</td>
            <td class="col-md-6">描述</td>
            <td class="col-md-2">操作</td>
        </thead>
        <tbody>

        </tbody>
    </table>

    <!-- 模态框 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="classModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">


                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
							aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">编辑栏目</h4>
                </div>

                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="className" class="col-sm-2 control-label">栏目名称:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="className" placeholder="栏目名称">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="chooseClass" class="col-sm-2 control-label">父栏目:</label>
                            <div class="col-sm-10">
                                <select class="form-control chooseClass">
							    <option class="val" value="">请选择父栏目</option>
						    </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="classNum" class="col-sm-2 control-label">序号:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="classNum" placeholder="序号">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="classDes" class="col-sm-2 control-label">栏目介绍:</label>
                            <div class="col-sm-10">
                                <textarea name="" id="classDes" cols="70" rows="5"></textarea>
                            </div>

                        </div>
                    </form>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default classNone" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary classSubmit" data-dismiss="modal">确定</button>
                </div>
                </form>
            </div>

            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
</div>
<script>
    //声明全局变量
    var baseUrl = "http://47.96.133.125:7788";
    var data;
    //通过promise封装函数
    function getData(type, url, data) {
        var p = new Promise((resolve, reject) => {
            //执行请求
            $.ajax({
                url: url,
                type: type,
                headers: {
                    "Authorization": sessionStorage.getItem("token")
                },
                data: data,
                success: function(res) {
                    resolve(res);
                }
            })
        })
        return p;
    }

    //点击进入就发送查询
    function getClassData(url) {
        return getData('get', baseUrl + url).then(function(res) {
            //清空tbody
            $("#classContent tbody").empty();
            //追加用户
            console.log(res);
            data = res.data;

            data.forEach((item, index) => {
                $("#classContent tbody").append(`
				 <tr>
				<td class="col-md-1">${index + 1}</td>
				<td class="col-md-1">${item.name}</td>
				<td class="col-md-1">${item.no}</td>
				<td class="col-md-1">${item.parentId==null?'': getParent(item.parentId)}</td>
				<td class="col-md-6">${item.description==null?'':item.description}</td>
				<td class="col-md-2">
					<span data-id="${item.id}" class="setBtn" data-toggle="modal" data-target="#classModal">编辑</span>
					<span data-id="${item.id}" class="delBtn">删除</span>
				</td>
			</tr>
				 `)
            });
            //查询父栏目

            //给编辑按钮绑定事件
            $('#classContent .setBtn').click(function() {
                    $('#classContent .modal-title').text('编辑栏目');
                    console.log($(this));
                    var id = $(this).attr("data-id");
                    $('#classContent .val').siblings().remove();
                    data.forEach((item, index) => {
                        $('#classContent .val').after(`<option value = ${item.id}>` + item.name + `</option>`)
                    })
                    console.log('id' + id);
                    var classData = data.filter(function(item) {
                        return item.id == id
                    })
                    setBtn(classData);
                })
                //给删除绑定事件
            $('#classContent .delBtn').click(function() {
                var id = $(this).attr("data-id");
                delBtn(id);
            });

        })
    }
    getClassData('/category/findAll');
    //编辑函数
    function setBtn(classData) {

        console.log(classData);
        var select = classData[0].parentId;

        if (select != null) {
            $('#classContent select').val(select);
        } else {
            $('#classContent select').val("");
        }

        $('#classContent #className').val(classData[0].name);

        $('#classContent #classNum').val(classData[0].no);
        $('#classContent #classDes').text(classData[0].description);
        //给确定按钮绑定事件
        $('#classContent .classSubmit').click(function() {
                var id = classData[0].id
                console.log(id);
                var name = $('#classContent #className').val();
                var parentId = $('#classContent select').val();
                var no = $('#classContent #classNum').val();
                var description = $('#classContent #classDes').val();
                console.log(description);
                var data = {
                    id,
                    name,
                    parentId,
                    no,
                    description
                }
                getData('post', baseUrl + '/category/saveOrUpdate', data).then(
                    function(res) {
                        console.log(res);
                        $('#classContent .classSubmit').unbind('click');
                        $('#classContent .classNone').unbind('click');
                        getClassData('/category/findAll');
                    }
                );
            })
            //给取消绑定按钮
        $('#classContent .classNone').click(function() {
            $('#classContent .classSubmit').unbind('click');
            $('#classContent .classNone').unbind('click');
        })
    }
    //删除函数
    function delBtn(id) {
        console.log(id);
        if (confirm("是否永久删除该栏目？")) {
            getData('get', baseUrl + '/category/deleteById?id=' + id).then(function(res) {
                console.log(res);
                getClassData('/category/findAll');
            });
        } ///category/deleteById?id=8
    }
    //给新增绑定函数

    $('#classContent .addclass').click(function() {
            $('#classContent .modal-title').text('新增栏目');
            $('#classContent #classModal input').val('');
            $('#classContent #classModal textarea').val('');
            $('#classContent .val').siblings().remove();
            //遍历栏目
            data.forEach((item, index) => {
                $('#classContent .val').after(`<option value = ${item.id}>` + item.name + `</option>`)
            });
            //给确定按钮绑定事件
            $('#classContent .classSubmit').click(function() {

                    var name = $('#classContent #className').val();
                    var parentId = $('#classContent select').val();
                    var no = $('#classContent #classNum').val();
                    var description = $('#classContent #classDes').val();
                    console.log(description);
                    var data = {

                        name,
                        parentId,
                        no,
                        description
                    }
                    getData('post', baseUrl + '/category/saveOrUpdate', data).then(
                        function(res) {
                            console.log(res);
                            $('#classContent .classSubmit').unbind('click');
                            $('#classContent .classNone').unbind('click');
                            getClassData('/category/findAll');
                        }
                    );
                })
                //给取消绑定按钮
            $('#classContent .classNone').click(function() {
                $('#classContent .classSubmit').unbind('click');
                $('#classContent .classNone').unbind('click');
            })

        })
        //获取父栏目元素
    function getParent(id) {
        var result = data.filter((item, index) => {
            return item.id == id;
        });
        return result[0].name;
    }
</script>